<template>
	<view class="input-index">
		<view class="border" v-show="boderTop"></view>
		<view class="input-box">
			<view class="title">
				<view>
					{{title}}
				</view>
				<view class="require" v-show="require"></view>
			</view>
			<view class="right">
				<input 
				  class="input"
				  :type="type" 
					:value="value" 
					placeholder-class="place-input"
					:placeholder="placeholder"
					:disabled="disabled"
					:maxlength='length'
				  @input="onInput">
				<view class="icon" v-if="select">
					<uni-icons type="right" size="15" color="#909090"></uni-icons>
				</view>
			</view>
		</view>
		<view class="border" v-show="borderBottom"></view>
	</view>
</template>

<script>
	export default {
		props:{
			value: String,
			title: String,//标题
			//是否显示上边框
			boderTop:{
				type: Boolean,
				default:true,
			},
			//是否显示下边框
			borderBottom:{
				type:Boolean,
				default:true
			},
			placeholder: String,
			//是否标记为必填项
			require:{
				type:Boolean,
				default:true
			},
			//是否禁止手动输入
			disabled:{
				type:Boolean,
				default:false
			},
			//是否需要箭头
			select:{
				type:Boolean,
				default:false
			},
			//input类型
			type:{
				type:String,
				default:'text'
			},
			//input长度
			length:{
				type:Number,
				default:-1
			}
		},
		// emits: ['update:modelValue'],
		methods:{
			onInput(e){
				this.$emit('input',e.target.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.input-index{
		.border{
			width: 100%;
			height: 4rpx;
			background-color: #e5e5e5;
		}
		.input-box{
			@include flex-r-between-center;
			line-height: 114rpx;
			padding: 0 30rpx;
			.title{
				flex: 0 0 auto;
				padding-right: 40rpx;
				font-size: 28rpx;
				color: #101010;
				display: flex;
				align-items: center;
				.require{
					height: 28rpx;
					width: 6rpx;
					background-color: #c24135;
					margin-left: 10rpx;
				}
			}
			.right{
				flex: 1 0 0;
				@include flex-r-end-center;
				.input{
					width: 100%;
					text-align: right;
					font-size: 28rpx;
					color: #909090;
				}
				.place-input{
					font-size: 28rpx;
					color: #909090;
				}
				.icon{
					padding-left: 20rpx;
				}
			}
		}
	}
</style>